<template>
    <div v-if="show" class="my-dialog h-full w-full flex justify-center items-center fixed top-0 left-0 z-[100]"
        draggable="false">
        <div class="min-w-[50%] min-h-[30%] bg-neutral-50 rounded-3xl p-2" :draggable="true">
            <div class="flex justify-between">
                <p>{{ props.title }}</p>
                <n-button @click="show = false" size="small" type="primary" circle>x</n-button>
            </div>
            <!-- 中间 -->
            <div>
                <template  v-if="$slots" v-for="(slotName, value) in $slots" :key="value">
                    <slot :name="value" :value="value"></slot>
                </template>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref,defineModel, useSlots } from 'vue'

const slot = useSlots()
const props = defineProps({
    title: {
        type: String,
        default: '标题'
    },
})
const show = defineModel()
</script>

<style scoped></style>